<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"  >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<template v-if="checkFig">
			<load-image mode="widthFix" :size="['100vw','100vh']" :src="checkFig.backgroundUrl"
				v-if="checkFig.backgroundUrl">
			</load-image>
			<template v-else>
				<app-image mode="widthFix" :size="['100vw','100vh']" src="checkin/check_in_bg_en.png"
					v-if="$isEnglishVersion" />
				<app-image mode="widthFix" :size="['100vw','100vh']" src="checkin/check_in_bg_zh.png" v-else />
			</template>

			<view class="e-abso checkin-rule c-white e-font-28" @tap="$goTo('/pages/checkIn/rules')">
				{{$t('checkin.签到规则')}}
			</view>
			<view class="checkin-cont-box">
				<view class="content-box bg-white">
					<view class="e-p-l-30 e-p-t-38 e-flex e-m-b-48" @tap="$goTo('/pages/checkIn/detail')">
						<view class="fw-600 e-font-32 c-333 e-flex-1">
							{{$t('checkin.奖励日历')}}
						</view>
						<view class="e-flex e-p-r-16">
							<text class="e-font-28 c-333 e-m-r-10">{{$t('checkin.明细')}}</text>
							<app-image :size="['20rpx']" src="checkin/right_arrow.png" />
						</view>
					</view>
					<view class="e-p-l-30 content-list e-flex">
						<view class="e-flex-xy-column-center e-rela" v-for="(item,index) in checkFig.list"
							:class="{'check-already': item.isCheck}">
							<app-image :size="['70rpx']" src="checkin/check_grey.png" v-if="item.isCheck" />
							<app-image :size="['70rpx']" src="checkin/checkin_glod.png" v-else />
							<text class="c-333 e-font-24">{{item.pint}}</text>
							<view class="e-abso extra-pint e-font-20 c-white"
								v-if="item.extraPint && item.extraStatus && item.extraRewardType === 1"
								:class="{'extra-pint-1': item.isCheck}">
								+{{item.extraPint}}
							</view>
						</view>
					</view>
					<view class="e-p-r-30 e-p-l-30 e-p-b-60">
						<view class="checkin_btn e-flex-xy-center e-font-32 fw-600 c-white"
							:class="{'checkin_btn-1':!checkFig.isday, 'checkin_btn-2':checkFig.isday}"
							@tap="handleCheckin">
							<text v-if="checkFig.isday">{{$t('checkin.今日已签到')}}</text>
							<text v-else>{{$t('checkin.签到领取')}}</text>
						</view>
					</view>
				</view>
			</view>

		</template>
		<!-- 签到成功弹窗 -->
		<e-modal :show="showModal" :confirmText="$t('common.确认')" :title="$t('checkin.签到成功')"
			@confirm="showModal = false">
			<view class="slot-content">
				<view class="" v-if="checkedObj">
					<view class="c-333 e-font-28 e-m-b-20 text-center">
						<text class="e-m-r-20">{{$t('checkin.签到奖励')}}:</text>
						<text class="fw-600 c-primary e-m-r-6">
							<template v-if="checkedObj.rewardWhither === 'yue'">
								{{$unitEn}}
							</template>
							{{checkedObj.pint}}
						</text>
						<text class="fw-600 c-primary"
							v-if="checkedObj.rewardWhither === 'yue'">{{$t('user.余额')}}</text>
						<text class="fw-600 c-primary e-m-r-10" v-else>{{$t('checkin.积分')}}</text>


					</view>
					<view class="c-333 e-font-28 text-center"
						v-if="checkedObj.extraPint && checkedObj.extraStatus && checkedObj.extraRewardType === 1">
						<text class="e-m-r-20">{{$t('checkin.连续签到奖励')}}:</text>
						<text class="fw-600 c-primary e-m-r-6">
							<template v-if="checkedObj.extraRewardWhither === 'yue'">
								{{$unitEn}}
							</template>
							{{checkedObj.extraPint}}
						</text>
						<text class="fw-600 c-primary"
							v-if="checkedObj.extraRewardWhither === 'yue'">{{$t('user.余额')}}</text>
						<text class="fw-600 c-primary e-m-r-10" v-else>{{$t('checkin.积分')}}</text>
					</view>
				</view>
			</view>
		</e-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		getCheckFig, userCheck
	} from '@/common/request/api'
	import type {
		CheckInFig
	} from '@/common/request/api'

	const checkFig = ref<undefined | CheckInFig>(undefined)
	const loading = ref(false)
	const showModal = ref(false)
	const checkedObj = ref<CheckInFig['list'][0] | undefined>(undefined)
	const getFig = () => {
		loading.value = true
		getCheckFig().then(res => {

			checkFig.value = res.data
		}).finally(() => {
			loading.value = false
		})
	}
	const handleCheckin = () => {
		if (checkFig.value?.isday) return
		userCheck().then(() => {

			checkFig.value?.list.some(item => {
				if (!item.isCheck) {
					checkedObj.value = { ...item }
					return true
				}
			})
			showModal.value = true
			getFig()

		})
	}

	getFig()
</script>

<style lang="scss" scoped>
	.checkin-cont-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		padding: 328rpx 20rpx 20rpx 20rpx;

		.content-box {
			border-radius: 20rpx;
			width: calc(100vw - 40rpx);

		}
	}

	.checkin_btn {
		border-radius: 50rpx;
		height: 100rpx;
	}

	.checkin_btn-1 {
		background: linear-gradient(90deg, #F5222D 0%, #FF8F8B 100%);
	}

	.checkin_btn-2 {
		background: linear-gradient(270deg, #E1E1E3 0%, #A5A5A5 100%);
	}

	.content-list {
		flex-wrap: wrap;
		margin-bottom: 60rpx;
	}

	.e-flex-xy-column-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 12rpx;
		width: 84rpx;
		margin-bottom: 10rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		height: 116rpx;
		padding-top: 8rpx;
	}

	.check-already {
		background: #EDEDED !important;
		color: #999999 !important;
	}

	.extra-pint {
		white-space: nowrap;
		padding: 0 10rpx 2rpx 10rpx;
		background: linear-gradient(90deg, #F5222D 0%, #FF8F8B 100%);
		border-radius: 200rpx 200rpx 200rpx 0px;
		top: 0;
		left: 50%;
		z-index: 999;
	}

	.extra-pint-1 {
		background: linear-gradient(270deg, #CCCCCC 0%, #999999 100%) !important;
	}

	.checkin-rule {
		padding: 10rpx 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		right: 20rpx;
		border-radius: 0px 0px 20rpx 20rpx;
		z-index: 999;
	}
</style>